<template>
	<view class="cenTen">
		<!-- 系统消息 -->
		<view class="" v-for="(sampu,index) in syst" :key='index'>
			<view class="system_data">{{sampu.systdata}}</view>
			<view class="syst_notice">
				<view class="sews_newx">
					<view class="notice_sews">{{sampu.systtile}}</view>
				</view>
				<view class="notice_text">
					<text>{{sampu.systtext}}</text>
				</view>
			</view>
		</view>
		
		<!-- 订单消息 -->
		<view class="" v-for="(order,index) in ors" :key='index' @click="orderon(index)">
			<view class="system_data">{{order.systdata}}</view>
			<view class="syst_notice">
				<view class="sews_newx">
					<view class="notice_sews">{{order.systtile}}</view>
					<view class="newx"></view>
				</view>
				<view class="notice_text">
					<text>{{order.systtext}}</text>
					<text class="iconfont icon-icon"></text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				syst:[
					{
						systdata:'2019年8月7日',
						systtile:'系统消息',
						systtext:'顾名思义即通知信息的传达处理系统。目的是为了让用户获得需要得到的消息及提醒并进行处理'
					}
					
				],
				ors:[
					{
						systdata:'2019年8月7日',
						systtile:'订单消息',
						systtext:'您有一笔新的订单，请查看'
					}
				]
			}
		},
		methods: {
			orderon(index){
				uni.navigateTo({
					url:'../personalcenter/order/hotelorder'
				})
			}
		}
	}
</script>

<style>
	@import "../../common/iconfont.css";
	@font-face {
		   font-family: 'iconfont';
			src: url('~@/static/iconfont.ttf');
	}
	.notice_text text{
		line-height: 1.4;
	}
	.sews_newx{
		display: flex;
		justify-content: space-between;
	}
	.sews_newx view{
		line-height: 1.5;
	}
	.newx{
		font-size: 18upx;
		width: 14upx;
		height: 14upx;
		border-radius: 50%;
		background: red;
		color: #fff;
		text-align: center;
		margin-top: 18upx;
	}
	/* .syst_notice view{
		line-height: 1.4;
	} */
	.notice_text{
		font-size: 30upx;
		color: #888;
		margin-top: 10upx;
		display: flex;
		justify-content: space-between;
	}
	.system_data{
		font-size: 32upx;
		color: #999;
		width: 100%;
		text-align: center;
		margin: 20upx 0;
	}
	.syst_notice{
		width: 86%;
		padding: 26upx 4%;
		margin: 0 auto;
		background: #f2faff;
		border-radius: 10upx;
		border: 1upx solid #ededed;
	}
	.notice_sews{
		font-size: 35upx;
		color: #333;
	}
</style>
